<template>
    <div class="contioner">
        <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
            <a-form size="small" :model="query" layout="inline">
                <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
                <a-form-item label="机台" prop="machineCode">
                    <a-input class="bacClass" v-model="query.machineCode" :style="{ width: '200px' }" allow-clear />
                </a-form-item>
                <a-form-item label="楼层" prop="areaName">
                    <a-input class="bacClass" v-model="query.areaName" :style="{ width: '200px' }" allow-clear />
                </a-form-item>
                <a-form-item label="状态" prop="state">
                    <a-select popup-container="html"  :style="{ width: '200px' }" v-model="query.state" allow-clear class="bacClass">
                        <a-option :value="0">待机</a-option>
                        <a-option :value="1">调机</a-option>
                        <a-option :value="2">开机</a-option>
                        <a-option :value="3">停机</a-option>
                        <a-option :value="4">维修</a-option>
                        <a-option :value="5">保养</a-option>
                        <!-- <a-option :value="6">无状态</a-option> -->
                    </a-select>
                </a-form-item>
            </a-form>
            <div class="my-tool-bar" style="margin-bottom: 5px">
                <a-space>
                    <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                    <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button>
                </a-space>
            </div>
        </div>
        <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div>

        <div style="background-color: #f0f2f5; height: 10px"></div>
        <div :style="{ height: '89%', padding: '10px', }">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                style="height:90%" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList"
                :columnDefs="tc">
            </AgGridVuesCopys>
            <paginationCopys :total="fySelet.total" show-total show-jumper show-page-size @change="PageSize"
                @page-size-change="change" style="justify-content: center" :page-size="fySelet.size"
                :current="fySelet.page" />
        </div>
    </div>
</template>
    
<script lang="ts" setup>


import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
const emit = defineEmits(['takebiaoji'])
const headerShow = ref<boolean>(true)


const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
}

const fySelet: any = reactive({
    total: 10,
    size: 10,
    page: 1
})

const PageSize = (val: any) => {
    fySelet.page = val
    selectJt()
}

const change = (val: any) => {
    fySelet.size = val
    selectJt()
}

interface Querin {
    planOrderCode: string
    machineCode: string
    areaName: string
    state: any
}
//getlist初始化接口参数
let query = reactive<Querin>({
    planOrderCode: '',
    machineCode: '',
    areaName: '',
    state: null
})

const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1
}

const tc = [
    {
        headerName: '织厂单位',
        field: 'firm',
        width: 150
    },
    {
        headerName: '楼层',
        field: 'areaName',
        width: 150
    },
    {
        headerName: '机型',
        field: 'machineTypeName',
        width: 150
    },
    {
        headerName: '机器名称',
        field: 'machineName',//
        width: 150
    },
    // {
    //     headerName: '针寸数',
    //     field: 'mouthBigDecimal',
    //     width: 150
    // },
    {
        headerName: '客户名称',
        field: 'mouthBigDecimal',//
        width: 150
    },
    {
        headerName: '调机类型',
        field: 'maintainType',//
        width: 150
    },
    {
        headerName: '圆机状态',
        field: 'state',
        cellRenderer: {
            template: `<span>{{val}}</span>`,
            setup(props: any) {
                return {
                    val:props.params.data.state == 0?'待机':props.params.data.state == 1?'调机':props.params.data.state == 2?'开机':props.params.data.state == 3?'停机':props.params.data.state == 4?'维修':props.params.data.state == 5?'保养':'未排产'
                }
            }
        },
        width: 150
    },
    {
        headerName: '机台号',
        field: 'machine0Code',
        width: 150
    },
]


function selectJt() {
    let dataForm;
    if(query.state == ''&& query.state !=0){
        dataForm={
            "page": fySelet.page,
            "size": fySelet.size,
            "firmId": query.planOrderCode,
            "areaName": query.areaName,
            "machineCode": query.machineCode
        }
    }else{
        dataForm={
            "page": fySelet.page,
            "size": fySelet.size,
            "firmId": query.planOrderCode,
            "state": query.state,
            "areaName": query.areaName,
            "machineCode": query.machineCode
        }
    }
    post({
        url: 'planSingle/report/circularMachine',
        data: dataForm
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList.value = res.data.list
            fySelet.total = res.data.total
        } else {
            Message.error(res.message)
        }
    })
}


const getList = () => {
    selectJt()
}
</script>
<style scoped>
.contioner {
    height: 100%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>
      